<script setup lang="js">
import {ref, onMounted, reactive} from "vue";
import {Tickets} from "@element-plus/icons-vue";
import { useRoute } from "vue-router";
import {flashProductRelationList,createFlashProductRelation,deleteFlashProductRelation,updateFlashProductRelation} from "@/api/flashProductRelation.js";
import {ElMessage, ElMessageBox} from "element-plus";
import {fetchProductList} from "@/api/product.js";

const route = useRoute();
const defaultListQuery = {
  pageNum: 1,
  pageSize: 5,
  flashPromotionId: null,
  flashPromotionSessionId: null
};

const listQuery = Object.assign({}, defaultListQuery)
const tableData =ref([]);
const total = ref(0);

// 弹窗
const editDialogVisible = ref(false);
const flashProductRelation = reactive({
  product: {},
})

onMounted(() => {
  listQuery.flashPromotionId = route.query.flashPromotionId;
  listQuery.flashPromotionSessionId = route.query.flashPromotionSessionId;
  getProductRelationList();
})


// TODO: 获取商品列表数据
const getProductRelationList = () => {
  flashProductRelationList(listQuery).then(res => {
    tableData.value = res.data.data.list;
    total.value = res.data.data.total;
  })
}

// TODO: 编辑
const handleUpdate = (row) => {
  editDialogVisible.value = true;
  flashProductRelation.product = Object.assign({}, row)
}





// TODO: 删除商品
const handleDelete = (row) => {
  ElMessageBox.confirm('是否确认删除该商品？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deleteFlashProductRelation(row.id).then((res) => {
      ElMessage.warning(res.data.message);
      ElMessage.success('删除成功');
      getProductRelationList();
    })
  }).catch(() => {

  })
}


// TODO: 分页操作方法
const handleSizeChange = (size) => {
  listQuery.pageNum = 1;
  listQuery.pageSize = size;
  getProductRelationList();
}
const handleCurrentChange = (val) => {
  listQuery.pageNum = val;
  getProductRelationList();
}
</script>

<template>
    <div class="product-list">
      <!--时间段列表-->
      <div class="add-list">
        <div class="add-btn">
          <el-icon>
            <Tickets/>
          </el-icon>
          <span>数据列表</span>
        </div>
        <div class="add-btn">
          <el-button type="primary" @click="handleAdd">添加</el-button>
        </div>
      </div>

      <!--数据列表-->
      <div class="data-list">
        <el-table :data="tableData" style="width: 100%" border>
          <el-table-column label="编号" align="center">
            <template #default="{row}">
              {{row.id}}
            </template>
          </el-table-column>
          <el-table-column label="商品名称" align="center">
            <template #default="{row}">
              {{row.product.name}}
            </template>
          </el-table-column>
          <el-table-column label="货号" align="center">
            <template #default="{row}">
              NO.{{row.product.productSn}}
            </template>
          </el-table-column>
          <el-table-column label="商品价格" align="center">
            <template #default="{row}">
              ￥{{row.product.price}} 元
            </template>
          </el-table-column>
          <el-table-column label="剩余数量" align="center">
            <template #default="{row}">
              {{row.product.stock}}
            </template>
          </el-table-column>
          <el-table-column label="秒杀价格" align="center">
            <template #default="{row}">
                ￥{{row.flashPromotionPrice === null ? 0 : row.flashPromotionPrice}}
            </template>
          </el-table-column>
          <el-table-column label="秒杀数量" align="center">
            <template #default="{row}">
                {{row.flashPromotionCount === null ? 0 : row.flashPromotionCount}}
            </template>
          </el-table-column>
          <el-table-column label="限购数量" align="center">
            <template #default="{row}">
                {{row.flashPromotionLimit === null ? '限购3件' : row.flashPromotionLimit}}
            </template>
          </el-table-column>
          <el-table-column label="排序" align="center">
            <template #default="{row}">
                {{row.sort === null ? 'N/A' : row.sort}}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="{row}">
              <el-button type="text" @click="handleUpdate">编辑</el-button>
              <el-button type="text" @click="handleDelete(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页 -->
      <div class="page-bar">
        <el-pagination
            background
            layout="total, sizes,prev, pager, next,jumper"
            :total="total"
            :page-sizes="[5,10,15,20]"
            v-model:page-size="listQuery.pageSize"
            v-model:current-page="listQuery.pageNum"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>

      <!-- 弹窗-->
      <el-dialog
        title="编辑秒杀商品:"
        v-model="editDialogVisible"
        width="50%">
        <el-form :model="flashProductRelation"
                 ref="flashProductRelationForm"
                 label-width="150px" size="small">
          <el-form-item label="商品名称：">
            <span>{{flashProductRelation.product.name}}</span>
          </el-form-item>
          <el-form-item label="货号：">
            <span>NO.{{flashProductRelation.product.productSn}}</span>
          </el-form-item>
          <el-form-item label="商品价格：">
            <span>￥{{flashProductRelation.product.price}}</span>
          </el-form-item>
          <el-form-item label="秒杀价格：">
            <el-input v-model="flashProductRelation.flashPromotionPrice" class="input-width">
              <template #prepend>￥</template>
            </el-input>
          </el-form-item>
          <el-form-item label="剩余数量：">
            <span>{{flashProductRelation.product.stock}}</span>
          </el-form-item>
          <el-form-item label="秒杀数量：">
            <el-input v-model="flashProductRelation.flashPromotionCount" class="input-width"></el-input>
          </el-form-item>
          <el-form-item label="限购数量：">
            <el-input v-model="flashProductRelation.flashPromotionLimit" class="input-width"></el-input>
          </el-form-item>
          <el-form-item label="排序：">
            <el-input v-model="flashProductRelation.sort" class="input-width"></el-input>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
</template>

<style scoped lang="scss">

.product-list {
  margin-top: 20px;
  display: flex;
  flex-direction: column;

  .add-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    margin-bottom: 20px;
    border: 1px solid #d5d5d5;
    border-radius: 5px;

    .add-btn {
      display: flex;
      align-items: center;

      span {
        margin-left: 8px;
        font-size: 18px;
      }
    }
  }

  .page-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0;

  }
}
.input-width{
  width: 200px;
}
</style>